<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>823680621@qq.com</title>
	<style>
		*{
			margin: 0;
			padding:0;
		}
		html,body{
			background: #2aafaa;
			height: 100%;
			width: 100%;
			position: relative;
			perspective: 800px;
		}
		div,b,i{
			position: absolute;
			transform-style: preserve-3d;
		}
		#city3d{
			background: #dddddd;
			left: 50%;
			top: 50%;
			/*transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);*/
			animation: rotate 60s infinite linear;
		}
		#city3d>div>b{
			transform-origin: top ;
			transform: rotateX(90deg);
		}
		#city3d>div>b>b{
			transform-origin: left ;
			transform: rotateY(90deg);
		}
		#city3d>div>b>b>b{
			transform-origin: right ;
			transform: rotateY(90deg);
		}
		#city3d>div>b>b>b>b{
			transform-origin: left;
			transform: rotateY(90deg);
		}
		#city3d>div>b>b>b>b>i{
			top: 100%;
			background: gray;
			transform-origin: top ;
			transform: rotateX(90deg);
		}
		.bg1 b{
			background: url(img/1.png);
		}
		.bg2 b{
			background: url(img/2.png);
		}
		.bg3 b{
			background: url(img/3.png);
		}
		.bg4 b{
			background: url(img/4.png);
		}
		.bg5 b{
			background: url(img/5.png);
		}
		@keyframes rotate{
			0%{transform:rotateX(45deg)  rotateZ(0deg) ;}
			100%{transform:rotateX(45deg)  rotateZ(360deg) ;}
		}

	</style>
</head>
<body>
<!-- 	<div id="city3d">
		<div class="bg1" style="left: 0;top: 0; width: 50px;height: 100px;background: red;">
			<b style="width: 50px;height: 100px;">
				<b style="width: 50px;height: 100px;">
					<b style="width: 50px;height: 100px;">
						<b style="width: 50px;height: 100px;">
							<i style="width: 50px;height: 50px;background: gray;"></i>
						</b>
					</b>
				</b>
			</b>
		</div>
	</div> -->
</body>
<script>
	function City3d(create){
		this.Create=create;//行列数
		this.Margin=60;//行列间隔
	}
	City3d.prototype.build=function(){
		this.bulidArea();
		// this.buildEstate(0,0);
		// this.buildEstate(100,100);
		for(var i=0;i<this.Create;i++){
			for(var j=0;j<this.Create;j++){
				this.buildEstate(i*this.Margin,j*this.Margin)
			}
		}
	}
	//构建地皮
	City3d.prototype.bulidArea=function(){
		this.city=document.createElement("div");
		this.city.id="city3d";
		var Size=this.Create*this.Margin;
		this.city.style.width=Size +"px";
		this.city.style.height=Size +"px";
		this.city.style.marginLeft=-Size/2 +"px";
		this.city.style.marginTop=-Size/2 +"px";
		document.body.appendChild(this.city);
	}
	City3d.prototype.buildEstate=function(l,t){
		var estate=document.createElement("div");
		var setw=this.setW();
		var seth=this.setH();
		estate.style.width=this.setH() +"px";
		estate.style.height=seth +"px";
		estate.style.left=l+"px";
		estate.style.top=t +"px";
		estate.className=this.back[this.getback()];
		this.city.appendChild(estate);
		var b1=document.createElement("b");
		b1.style.width=setw +"px";
		b1.style.height=seth +"px";
		estate.appendChild(b1);

		var b2=document.createElement("b");
		b2.style.width=setw +"px";
		b2.style.height=seth +"px";
		b1.appendChild(b2);

		var b3=document.createElement("b");
		b3.style.width=setw +"px";
		b3.style.height=seth +"px";
		b2.appendChild(b3);

		var b4=document.createElement("b");
		b4.style.width=setw +"px";
		b4.style.height=seth +"px";
		b3.appendChild(b4);

		var i=document.createElement("i");
		i.style.width=setw +"px";
		i.style.height=setw +"px";
		b4.appendChild(i);

	}

	//宽度 20-41
	City3d.prototype.setW=function(){
		return Math.floor(Math.random()*20)+21;
	}
	//高度 50-100
	City3d.prototype.setH=function(){
		return Math.floor(Math.random()*100)+50;
	}
	//背景class名
	City3d.prototype.back=['bg1','bg2','bg3','bg4','bg5']
	City3d.prototype.getback=function(){
		return Math.floor(Math.random()*4);
	}
	new City3d(10).build();
</script>
</html>